<template>
  <div class="selector" v-focus>
    <SelectorInput
      :placeholder="placeholder"
      :value="inputValue"
      @searchOptions="searchOptions"
    />
    <SelectorMenu
      :data="data"
      :searchValue="searchValue"
      @setItemValue="setItemValue"
    />
  </div>
</template>

<script>
import SelectorInput from './Input';
import SelectorMenu from './Menu';
import { focus } from '../../directives';

import { reactive, toRefs } from 'vue';

export default {
  name: 'Selector',
  directives: {
    focus
  },
  components: {
    SelectorInput,
    SelectorMenu
  },
  props: {
    placeholder: String,
    data: Array
  },
  setup(props, { emit }) {
    const state = reactive({
      inputValue: '',
      searchValue: ''
    });

    const setItemValue = (item) => {
      state.inputValue = item.text;
      emit('setItemValue', item.value);
    }

    const searchOptions = (value) => {
      state.searchValue = value;
    }

    return {
      ...toRefs(state),
      setItemValue,
      searchOptions
    }
  }
}
</script>

<style lang="scss" scoped>
  .selector {
    position: relative;
    width: 300px;
  }
</style>